<template>
  <div class="app-container">
    <el-form :inline="true" :model="hospitalParameter" class="demo-form-inline">
      <el-form-item label="医院名称">
        <el-input v-model="hospitalParameter.name" size="small" style="width: 150px" clearable placeholder="医院名称" />
      </el-form-item>
      <el-form-item label="医院性质">
        <el-select
          v-model="hospitalParameter.nature"
          clearable
          filterable
          style="width: 160px"
          placeholder="请选择"
          @change="serverChange"
        >
          <el-option label="公立" value="1" />
          <el-option label="民营" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="医院等级">
        <el-select
          v-model="hospitalParameter.grade"
          clearable
          filterable
          style="width: 160px"
          placeholder="请选择"
          @change="serverChange"
        >
          <el-option label="普通" value="0" />
          <el-option label="三级甲等" value="1" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button size="small" type="primary" @click="handleAddUpd(1,0)">
          <i class="el-icon-upload el-icon-plus" />
          新增医院
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-button size="small" @click="handleSearch">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button size="small" type="danger" @click="del">删除所选</el-button>
      </el-form-item>

    </el-form>
    <el-table
      id="out-table"
      class="el-table"
      border
      :data="hospitalList.list"
      style="width: 98%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        align="center"
        prop="name"
        label="医院名称"
        width="280"
      />
      <el-table-column
        align="center"
        prop="grade"
        label="医院等级"
        width="140"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.grade===0">普通等级</el-tag>
          <el-tag v-if="scope.row.grade===1">三甲医院</el-tag>

        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="type"
        label="医院类型"
        width="140"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type===1">门诊医院</el-tag>
          <el-tag v-if="scope.row.type===2">配药医院</el-tag>
          <el-tag v-if="scope.row.type===3">配药药店</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="nature"
        label="医院性质"
        width="140"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.nature===1">公立医院</el-tag>
          <el-tag v-if="scope.row.nature===2">民营医院</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="phone"
        width="150"
        label="医院电话"
      />
      <el-table-column
        align="center"
        prop="address2"
        label="医院的地址"
        width="280"
      />

      <el-table-column
        align="center"
        prop="sort"
        label="排序"
        width="100"
      />
      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间"
        width="200"
      />

      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            plain
            size="mini"
            @click="handleAddUpd(2,scope.row.id)"
          >编辑
          </el-button>
          <el-popconfirm
            class="ml-1"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删此医院吗？"
            @onConfirm="removeHospital(scope.row.id)"
          >
            <el-button
              slot="reference"
              type="danger"
              size="mini"
            >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--    添加/修改人员弹窗-->

    <el-dialog :title="popType===1?'添加医院信息':'修改医院信息'" width="46%" top="4%" :visible.sync="dialogFormVisible">
      <el-form :model="hospital">
        <div class="schedule-form ">
          <div class="box">
            <el-form-item label="医院图片" :label-width="formLabelWidth">

              <el-upload
                class="avatar-uploader"
                action="https://app.xiangban365.com/app_mobile/upload/file"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="hospital.image !=''" :src="hospital.image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
          <el-form-item label="医院名称" :label-width="formLabelWidth">
            <el-input v-model="hospital.name" style="width: 180px" autocomplete="off" />
          </el-form-item>
          <div class="box">

            <el-form-item label="医院类型" :label-width="formLabelWidth">

              <el-select v-model="hospital.type" style="width: 160px" placeholder="请选择医院类型">
                <el-option label="门诊医院" :value="1" />
                <el-option label="配药医院" :value="2" />
                <el-option label="配药药店" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="医院性质" :label-width="formLabelWidth">

              <el-select v-model="hospital.nature" style="width: 160px" placeholder="请选择医院类型">
                <el-option label="公立医院" :value="1" />
                <el-option label="民营医院" :value="2" />
              </el-select>
            </el-form-item>

            <el-form-item label="三甲医院" :label-width="formLabelWidth">
              <el-switch
                v-model="hospital.grade"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </div>

          <div class="box">

            <el-form-item label="医院电话" :label-width="formLabelWidth">
              <el-input v-model="hospital.phone" style="width: 180px" autocomplete="off" />
            </el-form-item>
            <el-form-item label="医院排序" :label-width="formLabelWidth">
              <el-input-number v-model="hospital.sort" style="width: 180px" autocomplete="off" />
            </el-form-item>

          </div>
          <el-form-item label="医院地址" :label-width="formLabelWidth">
            <el-input v-model="hospital.address2" style="width: 80%" autocomplete="off" />
          </el-form-item>
          <div class="box">
            <div class="box map">
              <div style="margin: 12px 14px 0px 30px;font-weight: bold;height: 300px"> 打卡地点</div>
              <amps ref="child" :movies="movies" @childFn="parentFn" />
            </div>
            <!--            <div class="box">-->
            <!--              <el-form-item label="详细地址":label-width="formLabelWidth">-->
            <!--                <el-input placeholder="请输入用户详细地址 例如：门牌号" style="width:500px" v-model="orderParameter.symptom"-->
            <!--                          autocomplete="off"></el-input>-->
            <!--              </el-form-item>-->
            <!--            </div>-->

          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="popType===1" type="primary" @click="saveInfo">确 定</el-button>
        <el-button v-if="popType===2" type="primary" @click="updateHospital">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页-->
    <el-pagination
      background
      :current-page="hospitalList.pageNum"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="hospitalList.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>

</template>

<script>
import amps from '@/components/Map/amps'
import { getHospital, listHospitalPage, removeHospital, saveHospital, updateHospital } from '@/api/hospital'

export default {
  name: 'Hospital',
  components: {
    amps
  },
  data() {
    return {
      // 查询下的=》用来源
      hospital: {
        image: '',
        sort: 1,
        grade: 0

      },

      hospitalList: [],
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      formLabelWidth: '100px',
      formLabelWidth2: '100px',
      popType: '',
      visible: false,
      hospitalParameter: {},
      postForm: {
        detailedAddress: '',
        longitude: '',
        latitude: ''
      },
      movies: {
        address: '',
        lng: '',
        lat: ''
      },
      drawer: false,

      search: '',
      ids: []
    }
  },
  created() {
    this.listHospitalPage()
  },
  methods: {
    chooseEmployee() {
      this.drawer = true
    },
    getPosition({ address, lat, lng, name }) {
      this.postForm.detailedAddress = address
      this.postForm.longitude = String(lng)
      this.postForm.latitude = String(lat)
    },
    // 选择服务类型触发事件
    serverChange() {

    },
    // 发起订单弹窗
    handleOrder() {
      this.dialogFormVisible2 = true
    },
    // 删除人员信息
    del() {
      this.$confirm('此操作将删除所选医院信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeHospital({
          id: this.ids
        }).then(res => {
          if (res.success) {
            this.listHospitalPage()
          } else {
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }).catch(() => {

      })
    },
    removeHospital(id) {
      const ids = []
      ids.push(id)
      removeHospital({
        id: ids
      }).then(res => {
        if (res.success) {
          this.listHospitalPage()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    // 添加/修改弹窗
    handleAddUpd(type, id) {
      this.movies.address = ''
      this.movies.lng = ''
      this.movies.lat = ''
      setTimeout(() => { // 设置延迟执行
        this.$refs.child.init()
      }, 100)

      if (type === 1) {
        // 添加
        this.dialogFormVisible = true
        this.popType = type
        // 清空
        this.hospital = {
          image: '',
          sort: 1,
          grade: 0

        }
      } else if (type === 2) {
        // 修改
        this.dialogFormVisible = true
        this.popType = type
        this.getHospital(id)
      }
    },
    // 勾选的信息
    handleSelectionChange(val) {
      this.ids = []
      for (let i = 0; i < val.length; i++) {
        this.ids.push(val[i].id)
      }
    },
    // 修改医院信息
    updateHospital() {
      updateHospital(this.hospital).then(res => {
        if (res.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.listHospitalPage()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    // 查看医院详情
    getHospital(id) {
      getHospital({
        id: id
      }).then(res => {
        this.hospital = res.dataMap
        this.movies.address = this.hospital.address
        this.movies.lng = this.hospital.longitude
        this.movies.lat = this.hospital.latitude
        this.$refs.child.init()
      })
    },
    // 搜索
    handleSearch() {
      this.listHospitalPage()
    },
    // 获取医院列表
    listHospitalPage() {
      listHospitalPage(this.hospitalParameter, this.pageNum, this.pageSize).then(res => {
        this.hospitalList = res.dataMap
      })
    },
    // 保存信息
    saveInfo() {
      saveHospital(this.hospital).then(res => {
        if (res.success) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.listHospitalPage()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    // 子组件传值
    parentFn(payload) {
      this.hospital.latitude = payload.lat
      this.hospital.longitude = payload.lng
      this.hospital.address = payload.address
      debugger
      this.hospital.city = payload.city
    },
    // 文件上传
    handleAvatarSuccess(res, file) {
      this.hospital.image = res.dataMap
    },
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension =
        testmsg === 'jpg' ||
        testmsg === 'JPG' ||
        testmsg === 'png' ||
        testmsg === 'PNG' ||
        testmsg === 'bpm' ||
        testmsg === 'BPM'
      const isLt50M = file.size / 1024 / 1024 < 10
      if (!extension) {
        this.$message({
          message: '上传图片只能是jpg / png / bpm格式!',
          type: 'error'
        })
        return false // 必须加上return false; 才能阻止
      }
      console.log(file)
      if (!isLt50M) {
        this.$message({
          message: '上传文件大小不能超过 10MB!',
          type: 'error'
        })
        return false
      }
      return extension || isLt50M
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.listHospitalPage()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.listHospitalPage()

      console.log(`当前页: ${val}`)
    },
    handlePrevClick() {
      this.pageNum--
      this.listHospitalPage()
    },
    handleNextClick() {
      this.pageNum++
      this.listHospitalPage()
    }

  }
}
</script>

<style lang="scss" scoped>
.schedule-form {
  max-height: 650px;
  padding-bottom: 10px;
  overflow: auto;
}

.employee-form {
  max-height: 90vh;
  padding-bottom: 10px;
  overflow: auto;
}

.map {
  height: 400px;
}

.search-box-wrapper {
  width: 100px !important;
}

.schedule-form {
  max-height: 650px;
  padding-bottom: 10px;
  overflow: auto;
}

.orderInfo {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin: 25px;
}

.base-input {
  width: 200px;

}

.el-select .el-input {
  width: 110px;
}

.el-dialog__body {
  padding: 30px 40px;
}

.app-container {
  margin-top: 10px;
}

.el-pagination {
  float: right;
  margin: 10px 30px;
}

.el-table {
  margin: 10px 0px;
}
</style>
